import React from 'react';
import { Timeline } from 'antd';
import { UpSquareOutlined } from '#/utils/antdIcons.js';
import { TRDefault } from '@/components/index.js';
import { TimelineItem, ToIcon } from '../index.js';
import styles from './index.less';

const History = (props) => {
  const [emptyMsg, setEmptyMsg] = React.useState('暂无数据');
  const { historys, collapseClick } = props;
  return (
    <div className={styles.container}>
      <div className={styles.title}>计算历史</div>
      {historys && historys.length ? (
        <Timeline>
          {historys.map((history, index) => {
            return (
              <Timeline.Item color="white" key={index}>
                <div className={styles.historyInfo}>
                  <span className={styles.caluclateTime}>{history.caluclateTime}</span>
                  <span className={styles.sendAdd}>{history.sendAdd}</span>
                  <ToIcon />
                  <span className={styles.acceptAdd} style={{ marginRight: '15px' }}>
                    {history.acceptAdd}
                  </span>
                  <UpSquareOutlined
                    rotate={history.show ? 0 : 180}
                    onClick={() => collapseClick(index)}
                  />
                </div>
                <TimelineItem history={history} show={history.show} />
              </Timeline.Item>
            );
          })}
          {
            // 为了让antd自带的timeline到底部
            // <Timeline.Item color="white" />
          }
        </Timeline>
      ) : (
        <div className={styles.empty}>
          <TRDefault type="emptysm" />
        </div>
      )}
    </div>
  );
};

export default History;
